<template>
	<view class="container">
		<view class="partner_box1" v-if="type">
			<view class="box1_box1" @click="type=1">我的订阅</view>
			<view class="box1_box1" @click="type=2">我发布的</view>
			<view class="box1_box2 goldBg" :style="type==1?'left:0;':'left:325upx;'"></view>
		</view>
		<view class="mainBoxItem" v-if="type==1" v-for="(item,value) in buyList" :key="value">
			<image :src="require('@/static/type'+item.reportType+'.png')" class="itempic" mode="widthFix"></image>
			<view class="itemRightBox">
				<view class="reportTit" @click="toDetailFn(item)">
					{{item.reportTitle}}
					<text
						:style="item.reportType==0?'background: #E7EFFF;color: #2563EB;':item.reportType==1?'background: #FFF6DF;color: #FFC53E;':item.reportType==2?'background: #DFFDF1;color: #0DC77A;':item.reportType==3?'background: #F1ECFF;color: #845CF8;':'background: #FFDCDB;color: #F15651;'">{{item.reportType==0?'一次性报告':item.reportType==1?'日报':item.reportType==2?'周报':item.reportType==3?'月报':'其他'}}</text>
				</view>
				<view class="timeBox" @click="toDetailFn(item)">
					<image src="@/static/watch.png" mode="widthFix"></image>
					<view class="numBox">{{item.lookNum?item.lookNum:0}}</view>
					<image src="@/static/down.png" mode="widthFix"></image>
					<view class="numBox">{{item.downloadNum?item.downloadNum:0}}</view>
					<view class="time">{{item.updateTime}}</view>
				</view>
				<view class="btnsBox">
					<!--  0申请中 1已完成 2开票失败 -->
					<!-- 没有发票id可以开，有发票id但是发票状态是失败也可以开 -->
					<view class="btnBox" v-if="(!item.invoiceId)||(item.invoiceId&&item.invoiceStatus==2)" @click.stop="getFPFn(item,1)">开发票</view>

				</view>
			</view>
		</view>
		<view class="mainBoxItem" v-if="type==2" v-for="(item,value) in addList" :key="value" @click="toDetailFn(item)">
			<image :src="require('@/static/type'+item.type+'.png')" class="itempic" mode="widthFix"></image>
			<view class="itemRightBox">
				<view class="reportTit">
					{{item.title}}
					<text
						:style="item.type==0?'background: #E7EFFF;color: #2563EB;':item.type==1?'background: #FFF6DF;color: #FFC53E;':item.type==2?'background: #DFFDF1;color: #0DC77A;':item.type==3?'background: #F1ECFF;color: #845CF8;':'background: #FFDCDB;color: #F15651;'">{{item.type==0?'一次性报告':item.type==1?'日报':item.type==2?'周报':item.type==3?'月报':'其他'}}</text>
				</view>
				<view class="timeBox">
					<image src="@/static/watch.png" mode="widthFix"></image>
					<view class="numBox">{{item.lookNum}}</view>
					<image src="@/static/down.png" mode="widthFix"></image>
					<view class="numBox">{{item.downloadNum}}</view>
					<view class="time">{{item.updateTime}}</view>
				</view>
			</view>
		</view>

		<view class="coverBox" v-if="fpVisible">
			<view class="coverMainBox">
				<view class="header"
					style="border: none;font-size: 34rpx;justify-content: center;font-weight: bold;height: 120rpx;">
					<view>开发票</view>
				</view>
			<scroll-view scroll-y="true"  style="height: 70vh;">
				<view class="header" style="border: none;font-size: 34rpx;">
					<view>税号</view>
				</view>
				<view class="password" style="width: 640rpx;margin-top: 8rpx;">
					<input class="psdInput" type="text" v-model="fpObj.taxId">
				</view>
				<view class="header" style="border: none;font-size: 34rpx;">
					<view>公司名称</view>
				</view>
				<view class="password" style="width: 640rpx;margin-top: 8rpx;">
					<input class="psdInput" type="text" v-model="fpObj.invoiceTitle">
				</view>
				<view class="header" style="border: none;font-size: 34rpx;">
					<view>开户行</view>
				</view>
				<view class="password" style="width: 640rpx;margin-top: 8rpx;">
					<input class="psdInput" type="text" v-model="fpObj.openBankName">
				</view>
				<view class="header" style="border: none;font-size: 34rpx;">
					<view>开户行账户</view>
				</view>
				<view class="password" style="width: 640rpx;margin-top: 8rpx;">
					<input class="psdInput" type="text" v-model="fpObj.openBankNumber">
				</view>
				<view class="header" style="border: none;font-size: 34rpx;">
					<view>邮箱</view>
				</view>
				<view class="password" style="width: 640rpx;margin-top: 8rpx;">
					<input class="psdInput" type="text" v-model="fpObj.email">
				</view>
				<view class="header" style="border: none;font-size: 34rpx;">
					<view>电话</view>
				</view>
				<view class="password" style="width: 640rpx;margin-top: 8rpx;">
					<input class="psdInput" type="number" v-model="fpObj.phone" maxlength="11">
				</view>
				<view class="header" style="border: none;font-size: 34rpx;">
					<view>类型</view>
				</view>
				<view class="password" style="width: 640rpx;margin-top: 8rpx;">
					<!-- type -->
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
				
		</scroll-view>
				<view class="btnView" style="border: none;">
					<view class="btn1" @click=" clearFn()">取消</view>
					<view class="btn2" @click="openFPFn">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				addList: [],
				buyList: [],
				type: 1,
				chooseItem: {},
				fpVisible: false,
				fpType: 0,
				fpObj: {
					id:'',
					taxId: '',
					invoiceTitle: '',
					email: '',
					phone: '',
					openBankName: '',
					openBankNumber: '',
					type: '',
					// address:''
				},
				 array: ['请选择','个人', '企业'],
				  index: 0,
			}
		},
		onLoad(e) {

		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getListFn()
		},
		methods: {
			clearFn(){
				this.fpVisible=false;
				this.fpObj= {
					id:'',
					taxId: '',
					invoiceTitle: '',
					email: '',
					phone: '',
					openBankName: '',
					openBankNumber: '',
					type: '',
					// address:''
				};
			},
			getListFn() {
				this.$http('/api/report/getUserReportPage', {
					pageNo: 1,
					pageSize: 999
				}).then(res => {
					this.addList = res.result.records
				})
				this.$http('/api/order/getOrderList', {
					pageNo: 1,
					pageSize: 999
				}).then(res => {
					this.buyList = res.result.records
				})

			},
			toDetailFn(item) {
				if (this.type == 1) {
					if (item.reportType == 0) {
						uni.navigateTo({
							url: '/pages/space/detail?isMyself=true&id=' + item.reportId
						})
					} else {
						uni.navigateTo({
							url: '/pages/space/reportList?isMyself=true&id=' + item.reportId
						})
					}
				} else {
					if (item.type == 0) {
						uni.navigateTo({
							url: '/pages/space/detail?isMyself=true&id=' + item.id
						})
					} else {
						uni.navigateTo({
							url: '/pages/space/reportList?isMyself=true&id=' + item.id
						})
					}
				}
			},
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value;
						this.fpObj.type=e.detail.value;
			        },
			getFPFn(item, type) {
				this.chooseItem = item
				this.fpVisible = true
				this.fpType = type
			},
			openFPFn() {
				if (!this.fpObj.taxId) {
					uni.showToast({
						title: '请输入税号',
						icon: 'none'
					})
					return
				}
				if (!this.fpObj.invoiceTitle) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
					return
				}
				if (!this.fpObj.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					})
					return
				}
				if (!this.fpObj.phone) {
					uni.showToast({
						title: '请输入电话',
						icon: 'none'
					})
					return
				}
				if (!this.fpObj.openBankName) {
					uni.showToast({
						title: '请输入开户行',
						icon: 'none'
					})
					return
				}
				if (!this.fpObj.openBankNumber) {
					uni.showToast({
						title: '请输入开户行账户',
						icon: 'none'
					})
					return
				}
				if (!this.fpObj.type) {
					uni.showToast({
						title: '请输入开票类型',
						icon: 'none'
					})
					return
				}
				/* if (!this.fpObj.address) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					})
					return
				} */
				console.log(this.fpObj);
				uni.showLoading({
					mask: true
				})
				this.$http('/api/invoice/apply', {
					taxId: this.fpObj.taxId,
					invoiceTitle: this.fpObj.invoiceTitle,
					email: this.fpObj.email,
					phone: this.fpObj.phone,
					openBankName:this.fpObj.openBankName,
					openBankNumber:this.fpObj.openBankNumber,
					// orderType: this.fpType,
					type: this.fpObj.type,
					id: this.chooseItem.id,
					orderNo: this.chooseItem.orderNo
					// orderNoList: [this.chooseItem.orderNo]
				}, 'POST').then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						})
						this.fpVisible = false
						uni.navigateTo({
							url: '/pages/my/fpList'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		padding-top: 32rpx;

		.partner_box1 {
			width: 650rpx;
			height: 82upx;
			background: #F7F7F7;
			border-radius: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 0 auto 32rpx;

			.box1_box1 {
				width: 325upx;
				height: 82upx;
				background: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				color: #000000;
				z-index: 2;
				font-weight: bold;
			}

			.box1_box2 {
				width: 325upx;
				height: 82upx;
				border-radius: 50upx;
				position: absolute;
				top: 0;
				z-index: 0;
				transition: all 0.6s;
			}
		}

		.mainBoxItem {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 28rpx;
			margin-bottom: 16rpx;
			display: flex;

			.itempic {
				width: 120rpx;
				min-width: 120rpx;
				height: 0;
				margin-right: 28rpx;
			}

			.itemRightBox {
				width: 100%;
				padding-top: 10rpx;

				.reportTit {
					font-size: 28rpx;
					color: #1F2937;
					font-weight: bold;
					padding-bottom: 56rpx;
					line-height: 28rpx;
					min-height: 56rpx;

					text {
						font-size: 16rpx;
						padding: 4rpx 10rpx;
						font-weight: normal;
						border-radius: 6rpx;
						margin-left: 16rpx;
					}
				}

				.timeBox {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 24rpx;
					color: #9CA3AF;

					image {
						width: 26rpx;
						height: 0;
					}

					.numBox {
						margin: 0 26rpx 0 10rpx;
					}

					.time {
						margin-left: auto;
					}
				}

				.btnsBox {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 70rpx;
					margin-top: 20upx;

					.btnBox {
						height: 64rpx;
						background: #FFBF08;
						border-radius: 40rpx;
						font-size: 30rpx;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 20rpx;
						padding: 0 40rpx;
					}

					.btnBox1 {
						width: 136rpx;
						height: 64rpx;
						border: 2rpx solid #FFBF08;
						border-radius: 40rpx;
						font-size: 30rpx;
						color: #FFBF08;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.coverBox {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;

		.coverMainBox {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 0 30rpx;

			.header {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #000000;
				border-bottom: 1rpx solid #eaeaea;
				width: 100%;
			}

			.password {
				width: 600rpx;
				height: 90rpx;
				background: #F6F7FB;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				color: #000000;
				font-weight: bold;
				margin: 30rpx 0 8rpx 0;
			}

			.psdInput {
				width: 532rpx;
				height: 90rpx;
				text-align: center;
			}

			.itemBox {
				width: 100%;
				height: 228rpx;
				background: #FFFFFF;
				border-bottom: 2rpx solid #F3F4F6;
				position: relative;

				.logo {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					position: absolute;
					top: 32rpx;
					left: 32rpx;
				}

				.phone {
					width: 52rpx;
					height: 52rpx;
					position: absolute;
					top: 20rpx;
					right: 16rpx;
					z-index: 1;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					width: 460rpx;
					height: 32rpx;
					position: absolute;
					top: 32rpx;
					left: 216rpx;
					font-weight: bold;
				}

				.addressPic {
					width: 22rpx;
					height: 28rpx;
					position: absolute;
					top: 88rpx;
					left: 216rpx;
				}

				.address {
					width: 388rpx;
					// height: 72rpx;
					font-size: 28rpx;
					color: #6B7280;
					position: absolute;
					top: 82rpx;
					left: 244rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.navs {
					width: 388rpx;
					height: 32rpx;
					position: absolute;
					top: 166rpx;
					left: 216rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.navItem {
						height: 32rpx;
						background: #FFBE06;
						border-radius: 5rpx;
						padding: 0 12rpx;
						line-height: 32rpx;
						font-size: 20rpx;
						color: #3D3D3D;
						margin-right: 14rpx;
					}
				}
			}

			.btnView {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 160rpx;
				border-top: 2rpx solid #F3F4F6;

				.btn1 {
					width: 206rpx;
					height: 78rpx;
					background: #F6F7FC;
					border-radius: 40rpx;
					border: 1rpx solid #E8E8E8;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #252E37;
				}

				.btn2 {
					width: 206rpx;
					height: 78rpx;
					background: #FFBE06;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #000000;
					margin-left: 28rpx;
				}
			}
		}
	}
</style>